<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="nickname">
                <el-input v-model="searchForm.nickname" clearable placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item prop="fullname">
                <el-input v-model="searchForm.fullname" clearable placeholder="真实姓名"></el-input>
            </el-form-item>
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>

           <el-form-item prop="applyTime">
             <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="addTime">
             <el-date-picker v-model="addTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="加入开始日期" end-placeholder="加入结束日期'" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSeach">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-button type="primary" @click="handleAdd()" size="small" icon="el-icon-plus"  v-has="'user:spreaderManager:add'">创建推广者</el-button>
            <el-button
              style="margin-left:10px"
              type="warning"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              v-has="'user:spreaderManager:down'"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading"  stripe>
            <el-table-column prop="nickname" label="用户昵称" v-if="!hideTableColumn.includes('number')" width="130px" align="center"></el-table-column>
            <el-table-column prop="fullname" label="真实姓名" v-if="!hideTableColumn.includes('name')" align="center" width="110px"></el-table-column>
            <el-table-column prop="telephone" label="手机号" v-if="!hideTableColumn.includes('idCard')" align="center"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" v-if="!hideTableColumn.includes('openingBank')" align="center"></el-table-column>
            <el-table-column prop="promotionUserNum" label="推广用户数" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="promotionStoreNum" label="推广商家数" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="joinTime" label="加入日期" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="applyTime" label="申请日期" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="withdrawableAmount" label="可提现额" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column label="状态"  v-if="!hideTableColumn.includes('status')" align="center">
              <template #default="scope">
                <div class="d-flex justify-center"><MySwitch :value.sync="scope.row.promoterStatus" text="启用|禁用" textValue="0|1" @changeStatus="handleChangeStatus(scope.row)" :permission="hasBtn('user:spreaderManager:state')"></MySwitch></div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="200" fixed="right">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    v-has="'user:spreaderManager:view'"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                 <!-- <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row.id)"
                  >修改</el-button> -->
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="handleDelt(scope.row)"
                    v-has="'user:spreaderManager:delt'"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 创建推广者 -->
    <el-dialog :title="dialogTitle" :visible.sync="addSpreaderVisible" width="800px" :close-on-click-modal="false" v-dialogDrag>
      <el-form id="formDialog" label-position="right" :model="form" :rules="rules" ref="form">
        <el-form-item label="手机号:" prop="phone" label-width="125px"  style="width:100%" >
            <div class="d-flex">
              <el-select v-model="form.phone" filterable placeholder="手机号"  class="flex1" @change="changePhone">
                  <el-option  v-for="item in phoneList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span class="flex1 margin-left-10">账号唯一识别标识，请如实填写推广者真实手机号</span>
            </div>
        </el-form-item>
        <el-form-item label="姓名:" prop="name" label-width="125px"  style="width:100%" >
           {{form.name}}
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard" label-width="125px"  style="width:100%" >
          <div class="d-flex">
            <span class="flex1">{{form.idCard}}</span>
            <span class="flex1 margin-left-10">用户必须为实名用户，便于后期管理与奖励结算</span>
          </div>
        </el-form-item>
        <el-form-item label="性别:" prop="sex" label-width="125px"  style="width:100%" >
           {{form.sex}}
        </el-form-item>
        <el-form-item label="推荐码:" prop="referralCode" label-width="125px"  style="width:100%" >
            <div class="d-flex">
              <span style="width:200px">{{form.referralCode}}</span>
              <span class="flex1 margin-left-10">推荐码作为推广者唯一识别标识，请确认是否为当前推广者推荐码</span>
            </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSpreaderVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddSpreaderSubmit('form')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="查看详情" width="1000px" v-dialogDrag :visible.sync="viewVisible" @close="viewVisible = false">
      <el-tabs type="border-card"  v-model="activeName">
        <el-tab-pane label="基本信息" name="basicMsg">
          <el-form  :model="basicMsgForm" status-icon :rules="basicMsgRules" ref="basicMsgForm" label-position="left" label-width="90px" class="form-box">
           <el-form-item label="姓名" prop="name">
              <el-input type="text" v-model="userDetail.fullname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input type="text" v-model="userDetail.idcardNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="idCard">
              <el-input type="text" :value="userDetail.gender=='0'?'未知':(userDetail.gender=='1'?'男':'女')" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="微信号" prop="idCard">
              <el-input type="text" v-model="userDetail.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="idCard">
              <el-input type="text" v-model="userDetail.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="微信ID" prop="idCard">
              <el-input type="text" v-model="userDetail.xcxOpenId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="微信昵称" prop="idCard">
              <el-input type="text" v-model="userDetail.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证信息" prop="idCard">
              <el-input type="text" v-model="userDetail.idcardNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册时间" prop="idCard">
              <el-input type="text" :value="this.parseTime(userDetail.insertDate)" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="实名状态" prop="idCard">
              <el-input type="text" value="已实名" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="标签" prop="idCard">
              <el-input type="text" v-model="userDetail.idCard" autocomplete="off"></el-input>
            </el-form-item> -->
          </el-form>
        </el-tab-pane>
       <!-- <el-tab-pane label="提现信息" name="withdrawMsg">
          <el-form  :model="withdrawMsgForm" status-icon  ref="basicMsgForm" label-position="left" label-width="140px" class="form-box">
           <el-form-item label="推荐总人数" prop="name">

            </el-form-item>
            <el-form-item label="本月推荐总人数" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="推荐总商家数" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="本月推荐总商家数" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收益总额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="本月待分配金额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提现总额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="本月收益金额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收益余额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可提现额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可提现额(元)" prop="idCard">
              <el-input type="text" v-model="basicMsgForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false" size="small">取 消</el-button>
       <!-- <el-button type="primary" @click="deltFn(userDetail.id)" size="small" :loading="btnLoading" v-if="activeName=='basicMsg'">提 交</el-button> -->
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    promoterReviewlist, manageListExport, queryAlreadyRealname, promoterReviewqueryUserInfo, savePromoterReview, promoterReviewdelete, promoterReviewdisable, promoterReviewgetInfo
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        applyTime:[],
        addTime:[],
        searchForm: {
          nickname:'',
          fullname:'',
          telephone:'',
          pageNum:1,
          pageSize:20,
        },
        phoneList:[],//实名的手机号
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        currentPath:'',
        viewVisible:false,
        userDetail:{},
        addSpreaderVisible:false,
        dialogTitle:'',
        form:{
          customerId:'',
          phone:'',
          name:'',
          sex:'',
          idCard:'',
          referralCode:''
        },
        rules:{
          phone: [{required: true, message: '请输入手机号',trigger: 'blur'}]
        },
        basicMsgForm:{/*基本信息*/
          name:'',
          idCard:''
        },
        basicMsgRules:{
           // name: [{required: true, message: '请输入手机号',trigger: 'blur'}],
        },
        withdrawMsgForm:{/*提现信息*/

        },
        activeName:'basicMsg'
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      //this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleAdd(){
        queryAlreadyRealname().then((result) => {/* 获取手机号列表 */
          if (result.code == 200) {
            this.phoneList = result.data;
          } else {
            this.$message.error(result.msg);
          }
        });
        this.dialogTitle = '创建推广者';
        this.addSpreaderVisible = true;
      },
      changePhone(){/* 通过手机号查找详细信息 */
        promoterReviewqueryUserInfo({telephone:this.form.phone}).then((result) => {
          if (result.code == 200) {
            this.form.customerId = result.data.customerId;
            this.form.name = result.data.fullname;
            this.form.idCard = result.data.idcardNumber;
            this.form.sex = result.data.gender;
            this.form.referralCode = result.data.invitationCode;
          } else {
            this.$message.error(result.msg);
          }
        });
      },
      handleAddSpreaderSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            savePromoterReview({customerId:this.form.customerId}).then((result) => {
              if (result.code == 200) {
                this.dataInfo();
                this.$message.success(result.msg);
                this.addSpreaderVisible = false;
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      async handleView(row){
        try {
          this.viewVisible = true;
          const result = await promoterReviewgetInfo({customerId:row.customerId })
          if (result.code == 200) {
            this.userDetail = result.data;
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
        data = this.addDateRange(this.searchForm, this.addTime, 'auditStartTime', 'auditEndTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return manageListExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleSearch(){
          this.searchForm.pageNum = 1;
          this.dataInfo();
      },
      resetSeach(){
        this.resetForm('searchForm');
        this.applyTime = [];
        this.addTime = [];
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
          data = this.addDateRange(this.searchForm, this.addTime, 'joinStartTime', 'joinEndTime');
          this.loading = true;
          const result = await promoterReviewlist(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; })
      },
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
              const result = await promoterReviewdelete({customerId:row.customerId});
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({ message: result.msg,type: 'success'});
               }else{
                  this.$message.error(result.msg);
               }
          }).catch((err) => {
              console.log(err);
          });
      },
      /** 推广者状态修改 **/
      async handleChangeStatus(row) {
        try {
          let data = {
            customerId : row.customerId,
            status: row.promoterStatus
          }
          const result = await promoterReviewdisable(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.promoterStatus = !row.promoterStatus;
          }
        } catch (err) {
          console.log(err)
        }
      },
      async deltFn(id){
        try {
          let result;
          this.currentPath == 'blackList'?(result = await delBlackData({id:id})):(result = await delWhiteData({id:id}));
          if (result.code == '200') {
               this.dataInfo();
               this.$message({
                   message: result.msg,
                   type: 'success'
                 });
               this.viewVisible = false;
           }else{
              this.$message.error(result.msg);
           }
        } catch (err) {
          console.log(err)
        }
      }

    }
  }
</script>

<style scoped lang="scss">
  .form-box{
    display: flex;
    flex-wrap: wrap;
  }
  .form-box /deep/ .el-form-item{
    width:49%;
    padding-left:20px;
  }
  .userDetail /deep/ .el-form-item{
    margin-bottom: 5px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
